<template>
	<div class="boss">
		<div class="top">
			<div class="topone">
				<p>各生产线考勤的情况</p>
				<el-table :data="tableData" style="width: 100%;height: 220px;">
					<el-table-column prop="date" label="名称">
					</el-table-column>
					<el-table-column prop="name" label="应到">
					</el-table-column>
					<el-table-column prop="address" label="实到">
					</el-table-column>
					<el-table-column prop="add" label="出勤">
					</el-table-column>
				</el-table>

			</div>
			<div class="topone">
				<p>各生产线产量情况</p>
				<el-table :data="tableData" style="width: 100%;height: 220px;">
					<el-table-column prop="date" label="名称">
					</el-table-column>
					<el-table-column prop="name" label="应生产">
					</el-table-column>
					<el-table-column prop="address" label="以生产">
					</el-table-column>
					<el-table-column prop="add" label="进度">
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div id="product">
		</div>
		<echart-b></echart-b>
	</div>
</template>

<script>
	import axios from 'axios'
	import * as echarts from 'echarts';
	import EchartB from '@/components/EchartB.vue'
	export default {
		components: {
			EchartB
		},
		mounted() {
			this.echartsTop()
			// this.getProduct()
		},
		methods: {
			echartsTop() {
				var echart = echarts.init(document.getElementById("product"));
				var option = {
					title: {
						text: "最近30天产量趋势图"
					},
					xAxis: {
						type: 'category',
						data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15',
							'16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29',
							'30'
						]
					},
					yAxis: {
						type: "value"
					},
					series: [{
						data: this.list1,
						type: 'bar',
						color: ["#cc6001"]
					}]
				};
				echart.setOption(option);
				this.list1 = []
			},

			getProduct() {
				axios.get("api/Product")
					.then(res => {
						if (res.data.code === 0) {
							if (this.flag) {
								this.list = res.data.data.list
								this.list.forEach(item => {
									this.list1.push(item.id)
								})
								this.$nextTick(() => {
									this.echartsTop();

								});
								this.flag = false
							} else {
								this.list = res.data.data.list2
								this.list.forEach(item => {
									this.list1.push(item.id)

								})
								this.$nextTick(() => {
									this.echartsTop();

								});
								this.flag = true
							}
						}
					})
			},
			timer(){
				this.timers = setInterval(()=>{
					this.getProduct()
				}, 1000)
				
			}

		},
		created() {
			this.getProduct()
			this.timer()
		},
		beforeDestroy(){
			clearInterval(this.timers)
			console.log(111);
		},
		data() {
			return {
				list: [],
				list1: [],
				flag: true,
				timers:null,
				tableData: [{
					date: '生一',
					name: '10',
					address: '10',
					add:'100%'
				}, {
					date: '生二',
					name: '10',
					address: '10',
					add:'100%'
				}, {
					date: '生三',
					name: '10',
					address: '10',
					add:'100%'
				}, {
					date: '生四',
					name: '10',
					address: '10',
					add:'100%'
				}]
			}
		}
	}
</script>

<style lang="scss">
	.boss {
		.top {
			width: 100%;
			height: 250px;
			display: flex;

			.topone {
				padding: 0 15px;
				flex: 1;
			}
		}

		#product {
			height: 300px;
			width: 100%;
		}

		
	}
	.el-main[data-v-3ad15a8a] {
		line-height: 30px;
	}
	
	.el-table .el-table__cell {
		padding: 7px 0;
	}
</style>
